<template>
  <a-select
    :disabled="disabled"
    :mode="mode"
    :allowClear="true"
    style="width: 100%"
    :placeholder="placeholder"
    :value="selVal"
    @change="selChange"
    :showSearch="true"
    :filter-option="(input, option) => {
      return option.componentOptions.children[0].elm.data.indexOf(input) >= 0
    }"
  >
    <!--自定义内容-->
    <div slot="dropdownRender" slot-scope="menu" @mousedown="e => e.preventDefault()">
      <a-row :gutter="24" >
        <a-col :md="14" :sm="24">
          <!--树形数据-->
          <a-tree
            :treeData="dropDown.orgTree"
            @select="selT"
            :replaceFields="{
              key: 'id',
            }"
          >
          </a-tree>
        </a-col>
        <a-col :md="10" :sm="24">
          <v-nodes :vnodes="menu" />
        </a-col>
      </a-row>

    </div>
    <a-select-option v-for="item in dropDown.userList" :key="item.id" :value="item.id">
      {{ item.name }}
    </a-select-option>
  </a-select>

</template>

<script>
import { getOrgTree } from '@/api/modular/system/orgManage'
import { getUserPage } from '@/api/modular/system/userManage'

export default {
  components: {
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    value: {
      // eslint-disable-next-line standard/array-bracket-even-spacing
      type: [ String, Array],
      required: false
    },
    mode: {
      type: String,
      default: 'default', // 'default' | 'multiple' | 'tags' | 'combobox'
      required: false
    },
    placeholder: {
      type: String,
      default: '请选择',
      required: false
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data () {
    return {
      selVal: this.value,
      dropDown: {
          orgTree: [],
          userList: []
      }
    }
  },
  watch: {
    // 监听数据变化，及时提交给父组件
    selVal: {
      deep: true,
      immediate: false,
      handler: function (newV, oldV) {
        // 向父组件更新
        this.$emit('change', newV)
      }
    },
    // 监听父组件数据变化，及时更新子组件
    value: {
      deep: true,
      immediate: true,
      handler: function (newV) {
        this.selVal = newV
      }
    }
  },
  created () {
    getOrgTree().then(res => {
      this.dropDown.orgTree = res.data
    })
    const params = {
      pageNo: 1,
      pageSize: -1
    }
    getUserPage(params).then((res) => {
      this.dropDown.userList = res.data.rows
    })
  },
  methods: {
    selChange (value) {
      this.selVal = value
    },
    // 选择树的时候执行
    selT (key, event) {
      getUserPage({
        pageNo: 1,
        pageSize: -1,
        'sysEmpParam.orgId': key.toString()
      }).then((res) => {
        this.dropDown.userList = res.data.rows
      })
    }
  }
}
</script>

<style lang="less">

</style>
